<template>
  <van-address-list
      v-model="chosenAddressId"
      :list="transformedAddressList"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
  ></van-address-list>

  <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      :style="{ height: '70%' }"
  >
    <van-address-edit
        style="margin-top: 4vh"
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :tel-validator="() => true"
        :address-info="currentAddress"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
    />
  </van-popup>
</template>

<script setup lang="ts">
import {onMounted, computed,ref} from 'vue';
import {AddAddress, DeleteAddress, reqAddressInfo, UpdateAddress} from "@/api/address";
import useUserStore from "@/store/modules/user.ts";
import type {AddressADD, AddressInfo, AddressInfoData, AddressUpdate} from "@/api/address/type.ts";
import { areaList } from '@vant/area-data';
import type {AddressEditInfo} from "vant";
import {SET_ADId} from "@/utils/localStore.ts";
//pinia仓库
let useStore=useUserStore();
//选择的 地址栏
const chosenAddressId=ref<number >(-1);
// 从用户仓库中取出id
const userId:string=useStore.userId as string;
//存储地址信息
const AddressList = ref<AddressInfo[]>([]);
//弹出框
const showBottom=ref<boolean>(false);
//当前选择框的地址
const currentAddress = ref<AddressEditInfo>({});
const reqAddress=async ()=>{
  let result:AddressInfoData=await reqAddressInfo(userId);
  console.log(result);
  if(result.code==1){
    AddressList.value=result.data;
  }

}
onMounted(()=>{
  reqAddress();
})
// 当需要对 AddressList 进行 map 操作时，确保使用 .value
const transformedAddressList = computed(() => {
  return AddressList.value.map(item => ({
    id: item.daId,
    name: item.contactName,
    tel: item.contactTel,
    address: item.address,
  }));
});
//地址修改表单数据
const addressUpdateForm:AddressUpdate=({
  daId:0,
  contactName:'',
  contactTel:'',
  address:'',
  userId:'',
})
//地址新增表单数据
const addressAddForm:AddressADD=({
  contactName:'',
  contactTel:'',
  address:'',
  userId:'',
});
//新增按钮
const onAdd=()=>{
  //清除上次数据
  currentAddress.value= {} as AddressEditInfo;
  chosenAddressId.value = -1;
  showBottom.value=true;
}
//修改按钮
const onEdit=(address:any)=>{
  chosenAddressId.value = address.id;
  //信息传入
  currentAddress.value.name = address.name;
  currentAddress.value.tel = address.tel;
  currentAddress.value.addressDetail = address.address;
  showBottom.value=true;
}
const onSelect = (address:any) => {
  // 更新选中的地址ID
  chosenAddressId.value = address.id;
};

const onSave = async(address:any) => {
  // console.log(chosenAddressId.value);
 if(chosenAddressId.value!=-1){
   //修改操作
   addressUpdateForm.daId=chosenAddressId.value;
   addressUpdateForm.contactName=address.name;
   addressUpdateForm.contactTel=address.tel;
   addressUpdateForm.address=address.addressDetail;
   addressUpdateForm.userId=userId;
   await UpdateAddress(addressUpdateForm);
 } else {
   // 地址新增
   addressAddForm.address=address.addressDetail;
   addressAddForm.userId=userId;
   addressAddForm.contactName=address.name;
   addressAddForm.contactTel=address.tel;
   await AddAddress(addressAddForm);
 }
  reqAddress(); // 重新加载地址列表
  showBottom.value = false;
};

const onDelete = async(address:any) => {
  console.log(chosenAddressId.value)
  let result=await DeleteAddress(chosenAddressId.value)
  reqAddress(); // 重新加载地址列表
  showBottom.value = false;
};

const onChangeDetail = () => {
  // 处理地址详情变更的逻辑
};
</script>

<style scoped>

</style>